Date pickers Guidelines 日期選擇器指導規則

Usage  用法

日期選擇器讓使用者可以簡單地選擇日期或日期範圍。它可以在不同裝置上使用：

在手機等小螢幕裝置上，以對話方塊形式顯示。在平板電腦和電腦等大螢幕裝置上，以下拉選單形式顯示在文字框下方

有三種型別的日期選擇器：1 Docked date picker  停靠式日期選擇器 2 Modal date picker  模態日期選擇器 3 Modal date input  模態日期輸入框

Anatomy 結構

Docked date picker  停靠式日期選擇器

Modal date input  模態日期輸入框

Full-screen date picker  全屏日期選擇器

Docked date picker  停靠式日期選擇器

Usage  用法

停靠式日期選擇器是一個選擇日期的工具。它包含一個文字框，點選後會彈出一個日曆。您可以用兩種方式選擇日期：直接在文字框裡輸入，或者在日曆上點選選擇。這種選擇器很方便，因為它讓您能夠輕鬆檢視和選擇任何日期，無論是過去還是將來的日期。

Behavior  行為

您可以透過兩種方式輸入日期：直接用鍵盤輸入，或者點選日曆介面選擇。這兩種方式都能立即使用。

Month selection  月份選擇

您可以用兩種簡單的方式選擇月份：使用左右箭頭按鈕切換，或者直接點選下拉選單選擇想要的月份。

Year selection 年份選擇

您可以透過兩種方式選擇年份：點選左右箭頭按鈕切換，或者直接點選下拉選單選擇。

Modal date picker  模態日期選擇器

Behavior 行為

模態日期選擇器有以下簡單的使用方法：

• 左右滑動可以切換不同月份

• 上下滑動可以切換不同年份

• 點選當前顯示的年份可以開啟年份選擇介面

注意：這種選擇器不適合選擇很久以前或很久以後的日期（比如出生日期）。對於這種情況，建議使用模態輸入選擇器或固定日期選擇器。

Date range selection  日期範圍選擇

日期範圍讓您可以選擇一個開始日期和結束日期。這在訂機票或酒店時特別有用。

選擇日期範圍很簡單：

• 在日曆上先點選您想要的開始日期

• 再點選結束日期

• 想看其他月份時，只需上下滾動即可

Modal date input  模態日期輸入框

模態日期輸入允許使用鍵盤上的數字手動輸入日期。使用者可以在對話方塊中輸入一個日期或一個日期範圍。

Behavior  行為

點選編輯按鈕或日曆圖示就可以在兩種輸入方式之間切換：用鍵盤輸入日期，或用日曆選擇日期。

Compact window size  緊湊視窗大小

在小螢幕裝置（比如手機）上使用時，最好用全屏日期選擇器。這樣不僅更容易看清楚，而且按鈕也會變得更大，更容易點選。這種選擇器會佔滿整個螢幕。

Medium and expanded window sizes中等和擴充套件視窗大小

停靠式日期選擇器最適合中等和擴充套件視窗。點選輸入欄位時會顯示下拉日曆，使用者可以透過輸入或日曆兩種方式選擇日期。這種設計讓使用者能方便地瀏覽和選擇任何時間段的日期。

Selection  選擇

日期選擇器用不同的顏色來顯示您選擇的日期。當您選擇一個日期範圍時：

開始日期和結束日期會用突出的顏色標記。這兩個日期之間的所有日期會用淺色標記，這樣您可以清楚地看到整個日期範圍

Appearing and disappearing出現與消失

關閉日期選擇器有幾種簡單方法：

• 點選"確定"按鈕儲存您選擇的日期
• 點選"取消"按鈕放棄選擇
• 點選選擇器外的任何地方也會關閉它

日期選擇器會一直顯示，直到您選擇以上任一方式關閉它。

如果您在手機上使用全屏選擇器，您還可以：
• 點選右上角的"X"按鈕關閉
• 點選"儲存"按鈕確認您的選擇

對於停靠式日期選擇器，它會在您點選輸入框後顯示在下方。

Responsive layout  響應式佈局

日期選擇器的大小是固定的，不會隨著視窗大小的變化而自動調整。

Interaction & style  互動與樣式

點選編輯圖示可以切換到手動輸入日期模式。為了確保所有人都能方便地使用，每個可點選的按鈕或區域都保持著48x48dp的大小，這是Material設計的標準要求。注意：如果把按鈕設計得太小或太密集，會讓使用者不容易準確點選，影響使用體驗。